<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/user.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="js/JQuery2.1.4.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>


</head>

<body>
    <!-- 顶部 -->
    <div class="top" id="top">
        <div class="container">
            <div class="head1"><img src="./img/home/logo.png" alt="">
                <div class="user">
                    <a href="./login.html">登录</a>
                    <a href="./register.html">注册</a>
                    <div class="input-serch">
                        <input type="text" placeholder="热门搜索：干花花瓶">
                        <a href="">
                            <img src="./img/home/search.png" alt="">
                        </a>
                    </div>
                    <a href="./user.html"><img src="./img/home/user.png" alt=""></a>
                    <a href="./system.html"><img src="./img/home/code.png" alt=""></a>

                </div>
            </div>
            <div class="nav">
                <a href="./index.html">首页</a>
                <a href="" id="a-list">所有商品</a>
                <a href="">布艺软饰</a>
                <a href="./decoration.html">装饰摆件</a>
                <a href="./wall.html">墙饰壁挂</a>
                <a href="">蜡艺香薰</a>
                <a href="">创意家居</a>
            </div>

        </div>
        <ul class="box" id="list" style="display: none;">
            <li>
                <a href="">
                    <img src="./img/home/list (1).jpg" alt="">
                    <p>这是内容</p>
                </a>

            </li>
            <li>
                <a href="">
                    <img src="./img/home/list (2).jpg" alt="">
                    <p>这是内容</p>
                </a>

            </li>
            <li>
                <a href="">
                    <img src="./img/home/list (3).jpg" alt="">
                    <p>这是内容</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/home/list (4).jpg" alt="">
                    <p>这是内容</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/home/list (5).jpg" alt="">
                    <p>这是内容</p>
                </a>
            </li>


        </ul>
    </div>


    <!-- 内容 -->
    <div id="blank"></div>



    <div class="mid1">

        <div class="container">
            <div class="row">
                <div class="col-1"><a href="">首页</a></div>
                <div>/</div>
                <div class="col-1"><a href="">个人中心</a></div>
                <div>/</div>
                <div class="col-1"><a href="">我的订单</a></div>
            </div>

        </div>
    </div>
    <div class="big">
        <div class="content">
            <div class="box">
                <!-- 侧边固定栏 用户图片 -->
                <div class="box1">
                    <div class="touxiang">
                        <img src="./img/user/user.png" alt="">
                        <div>
                            <a href="">[ss***k]</a>
                            <a href="./login.html">[退出登录]</a>
                        </div>
                    </div>


                    <!-- 切换列表 -->
                    <ul class="user-list nav" id="myTab" role="tablist">
                        <li><span>我的交易</span></li>
                        <li><a href="./shopcar.html">我的购物车</a></li>
                        <li>
                            <a class="active" id="" data-toggle="tab" href="#my-list">我的订单</a>
                        </li>
                        <li>
                            <a class="" id="" data-toggle="tab" href="#comment">评价晒单</a>
                        </li>
                        <li><span>个人中心</span></li>
                        <li>
                            <a class="" id="" data-toggle="tab" href="#mycenter">我的中心</a>
                        </li>
                        <li>
                            <a class="" id="" data-toggle="tab" href="#address">地址管理</a>
                        </li>
                        <li><span>账户管理</span></li>
                        <li>
                            <a class="" id="" data-toggle="tab" href="#user-infor">个人信息</a>
                        </li>
                        <li>
                            <a class="" id="" data-toggle="tab" href="#password">修改密码</a>
                        </li>
                    </ul>

                </div>
                <!-- 变化的内容 -->
                <div class="box2">
                    <div class="tab-content " id="main-content">
                        <!-- 我的订单 -->
                        <div class="tab-pane fade show active" id="my-list">
                            <div class="title">
                                <span>我的订单</span>
                                <a href="">请谨防钓鱼诈骗电话，了解更多>></a>
                            </div>

                            <div class="my-list-mid">
                                <div class="m1 nav">
                                    <a href="#menu" data-toggle="tab" class="active">全部有效菜单</a>
                                    <a href="#menu1" data-toggle="tab">待支付</a>
                                    <a href="#menu2" data-toggle="tab">待收货</a>
                                    <a href="#menu3" data-toggle="tab">已关闭</a>
                                </div>
                                <div class="m2">
                                    <input type="text" name="" id="" placeholder="请输入商品名称、订单号">
                                    <button></button>
                                </div>
                            </div>
                            <!-- 表 -->
                            <div class="tab-content">
                                <div class="tab-pane active " id="menu">
                                    <div class="my-list-content">
                                        <div class="item">
                                            <div class="item1">
                                                <h4>已收货</h4>
                                                <div>
                                                    <p>2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                                    <span>订单金额: <i>￥99.99元</i> </span>
                                                </div>
                                            </div>
                                            <div class="item2">
                                                <div class="item2-1">
                                                    <img src="./img/user/my-list (1).png" alt="">
                                                    <p>
                                                        家用创意菜盘子圆盘 釉下彩复古
                                                        <br>
                                                        <span>￥99.99x1</span>
                                                    </p>
                                                </div>
                                                <div class="item2-2">
                                                    <button>待评价</button>
                                                    <button>订单详情</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="item1">
                                                <h4 class="red">待支付</h4>
                                                <div>
                                                    <p>2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                                    <span>订单金额: <i>￥99.99元</i> </span>
                                                </div>
                                            </div>
                                            <div class="item2">
                                                <div class="item2-1">
                                                    <img src="./img/user/my-list (2).png" alt="">
                                                    <p>
                                                        家用创意菜盘子圆盘 釉下彩复古
                                                        <br>
                                                        <span>￥99.99x1</span>
                                                    </p>
                                                </div>
                                                <div class="item2-2">
                                                    <button class="redbg">待评价</button>
                                                    <button>订单详情</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="item1">
                                                <h4 class="red">待收货</h4>
                                                <div>
                                                    <p>2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                                    <span>订单金额: <i>￥99.99元</i> </span>
                                                </div>
                                            </div>
                                            <div class="item2">
                                                <div class="item2-1">
                                                    <img src="./img/user/my-list (3).png" alt="">
                                                    <p>
                                                        家用创意菜盘子圆盘 釉下彩复古
                                                        <br>
                                                        <span>￥99.99x1</span>
                                                    </p>
                                                </div>
                                                <div class="item2-2">
                                                    <button class="redbg">待评价</button>
                                                    <button>订单详情</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="item1">
                                                <h4>已关闭</h4>
                                                <div>
                                                    <p>2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                                    <span>订单金额: <i>￥99.99元</i> </span>
                                                </div>
                                            </div>
                                            <div class="item2">
                                                <div class="item2-1">
                                                    <img src="./img/user/my-list (4).png" alt="">
                                                    <p>
                                                        家用创意菜盘子圆盘 釉下彩复古
                                                        <br>
                                                        <span>￥99.99x1</span>
                                                    </p>
                                                </div>
                                                <div class="item2-2">
                                                    <button>待评价</button>
                                                    <button>订单详情</button>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="my-list-bottom">
                                        <img src="./img/user/left.png" alt="">
                                        <span>1</span>
                                        <img src="./img/user/right.png" alt="">
                                    </div>
                                </div>
                                <div class="tab-pane " id="menu1">1</div>
                                <div class="tab-pane " id="menu2">2</div>
                                <div class="tab-pane " id="menu3">3</div>
                            </div>


                        </div>



                        <!-- 评价晒单 -->
                        <div class="tab-pane fade " id="comment">
                            <div class="title">
                                <span>商品评价</span>

                            </div>
                            <div class="comment-mid">
                                <div class="m1">
                                    <a href="">待评价商品</a>
                                    <a href="">已评价商品</a>
                                    <a href="">评价失效商品</a>
                                </div>
                            </div>
                            <div class="comment-content">
                                <div class="row">
                                    <div class="col-3">
                                        <img src="./img/user/comment (1).png" alt="">
                                        <ul>
                                            <li>家用创意挂壁 釉下彩复古</li>
                                            <li>￥199.00</li>
                                            <li>16000人评价</li>
                                            <li><button class="redbtn">去评价</button></li>
                                        </ul>
                                    </div>
                                    <div class="col-3">
                                        <img src="./img/user/comment (2).png" alt="">
                                        <ul>
                                            <li>家用创意挂壁 釉下彩复古</li>
                                            <li>￥199.00</li>
                                            <li>16000人评价</li>
                                            <li><button class="redbtn">去评价</button></li>
                                        </ul>
                                    </div>
                                    <div class="col-3">
                                        <img src="./img/user/comment (3).png" alt="">
                                        <ul>
                                            <li>家用创意挂壁 釉下彩复古</li>
                                            <li>￥199.00</li>
                                            <li>16000人评价</li>
                                            <li><button class="">已评价</button></li>
                                        </ul>
                                    </div>
                                    <div class="col-3">
                                        <img src="./img/user/comment (4).png" alt="">
                                        <ul>
                                            <li>家用创意挂壁 釉下彩复古</li>
                                            <li>￥199.00</li>
                                            <li>16000人评价</li>
                                            <li><button class="">已失效</button></li>
                                        </ul>
                                    </div>

                                </div>
                            </div>



                        </div>



                        <!-- 我的中心 -->
                        <div class="tab-pane fade " id="mycenter">
                            <div class="title">
                                <div class="t1">
                                    <img src="./img/user/user.png" alt="">
                                    <p>ss***k</p>
                                </div>
                                <div class="t2">绑定邮箱：12****4@**.com</div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <img src="./img/user/mycenter (1).png" alt="">
                                    <p>待支付的订单：<span>0</span>
                                        <br>
                                        <i>查看待支付订单</i>
                                    </p>
                                </div>
                                <div class="col-6">
                                    <img src="./img/user/mycenter (2).png" alt="">
                                    <p>待支付的订单：<span>0</span>
                                        <br>
                                        <i>查看待支付订单</i>
                                    </p>
                                </div>
                                <div class="col-6">
                                    <img src="./img/user/mycenter (3).png" alt="">
                                    <p>待支付的订单：<span>0</span>
                                        <br>
                                        <i>查看待支付订单</i>
                                    </p>
                                </div>
                                <div class="col-6">
                                    <img src="./img/user/mycenter (4).png" alt="">
                                    <p>待支付的订单：<span>0</span>
                                        <br>
                                        <i>查看待支付订单</i>
                                    </p>
                                </div>
                            </div>
                        </div>




                        <!-- 地址管理 -->
                        <div class="tab-pane fade " id="address">
                            <div class="title">
                                收货地址
                            </div>
                            <div class="address-box">
                                <div class="b1">
                                    <a href="" data-toggle="modal" data-target="#myModal"></a>
                                    <p>添加新地址</p>
                                    <!-- 模态框 -->
                                    <div class="modal fade" id="myModal">
                                        <div class="modal-dialog">
                                            <div class="modal-content">

                                                <div class="modal-body">
                                                    <input type="text" placeholder="姓名">
                                                    <input type="text" placeholder="手机号">
                                                    <select name="" id="" class="select-margin">
                                                        <option value="">省份/自治州</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                    </select>
                                                    <select name="" id="">
                                                        <option value="">城市/地区</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                    </select>
                                                    <select name="" id="" class="select-margin">
                                                        <option value="">区/县</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                    </select>
                                                    <select name="" id="">
                                                        <option value="">配送区域</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                        <option value="">1</option>
                                                    </select>

                                                    <input type="text" placeholder="">
                                                    <input type="text" placeholder="邮政编码">
                                                </div>
                                                <!-- 模态框底部 -->
                                                <div class="modal-footer">
                                                    <button type="button" class="modal-button1"
                                                        data-dismiss="modal">保存</button>
                                                    <button type="button" class="modal-button2"
                                                        data-dismiss="modal">取消</button>
                                                </div>



                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="b2">
                                    <h3>ss***k</h3>
                                    <p>1573*****666
                                        <br>
                                        河北省 唐山市 路北区
                                        <br>
                                        唐山市大学公寓村 （063000）
                                    </p>
                                </div>
                            </div>


                        </div>



                        <!-- 个人信息 -->
                        <div class="tab-pane fade " id="user-infor">
                            <div class="title">
                                个人信息
                            </div>
                            <div class="user-infor-content">
                                <div class="left">
                                    <img src="./img/user/user.png" alt="">
                                </div>
                                <ul class="right">
                                    <li>
                                        <span>基础资料</span>
                                        <a href="">修改信息</a>
                                    </li>
                                    <li>姓名：六六六</li>
                                    <li>生日：1995-06-06</li>
                                    <li>性别：女</li>
                                    <li>高级设置</li>
                                    <li>
                                        <span>账号地区：中国</span>
                                        <a href="">修改</a>
                                    </li>
                                </ul>
                            </div>

                        </div>


                        <!-- 修改密码 -->
                        <div class="tab-pane fade " id="password">
                            <div class="title">
                                修改密码
                            </div>
                            <table>
                                <tr>
                                    <td><span>选择验证身份方式：</span> </td>
                                    <td>
                                        <input type="checkbox" id="password-confirm">&nbsp;<label
                                            for="password-confirm">密码验证</label>
                                        <input type="checkbox" id="email-confirm">&nbsp;<label
                                            for="email-confirm">邮箱验证</label>
                                    </td>
                                </tr>
                                <tr>
                                    <td><span>原密码：</span> </td>
                                    <td><input type="text" placeholder="输入原密码"></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>输入原密码</td>
                                </tr>
                                <tr>
                                    <td><span>新密码：</span> </td>
                                    <td><input type="text" placeholder="新密码"></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>6-16个字符，需要使用字母，数字或符号组合，不能使用纯数字，纯字母，纯符号</td>
                                </tr>
                                <tr>
                                    <td><span>重复新密码：</span> </td>
                                    <td><input type="text" placeholder="新密码"></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>再次输入密码</td>
                                </tr>
                                <tr>
                                    <td><span>验证码：</span> </td>
                                    <td>
                                        <input type="text" placeholder="">
                                        <img src="./img/user/yanzhengma.png" alt="">
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>按右图输入验证码，不区分大小写</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td><button>提交</button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


















    <!-- 侧边固定栏 -->
    <div class="rightside">
        <a class="rightside-box" href="./shopcar.html"></a>
        <a class="rightside-box" href="#phone"></a>
        <a class="rightside-box" href="./user.html"></a>
        <a class="rightside-box" href="#blank"></a>
    </div>

    <!-- 底部 -->
    <div class="foot">
        <div class="container">
            <div class="row foot1">
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <img src="./img/home/foot1.png" alt="">
                    <span>7天无理由退货</span>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <img src="./img/home/foot2.png" alt="">
                    <span>15天免费换货</span>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <img src="./img/home/foot3.png" alt="">
                    <span>满599包邮
                    </span>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <img src="./img/home/foot4.png" alt="">
                    <span>手机特色服务
                    </span>
                </div>

            </div>

        </div>
        <div class="foot2">
            <p>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号<br>
                违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </p>
        </div>

    </div>




    <script>
        $(function () {
            $("#a-list").hover(
                function () {
                    $("#list").show();
                },
                function () {
                    $("#list").hide();
                });
            $('#list').hover(
                function () {
                    $("#list").show();
                },
                function () {
                    $("#list").hide();
                });

        });
    </script>
    <script>
        var search1 = location.search;
        var cod = search1.substr(1).split('&')
        var arr = {}
        for (i = 0; i < cod.length; i++) {
            var cod1 = cod[i].split('=');
            console.log(cod1);
            if (cod1.length === 2) {
                arr[cod1[0]] = cod1[1];
                // console.log(arr);
            }
        }
        console.log(arr);
        document.querySelector('.touxiang div a:first-child').innerHTML = arr.uname
        document.querySelector('#mycenter .t1 p').innerHTML = arr.uname
        document.querySelector('#address .b2 h3').innerHTML = arr.uname

    </script>
</body>

</html>